import 'package:flutter/material.dart';
import 'package:shining_red_star/api/list_letter.dart';
import 'package:shining_red_star/api/list_letter_group.dart';
import 'package:shining_red_star/definitions/router.dart';
import '../../model/pin_yin.dart';
import '../../model/router_params.dart';
import '../../widgets/letter_index_card.dart';
import '../../wrappers/safe-area.dart';

class _Group extends LetterGroup {
  final List<LetterInfo> letterList;

  const _Group(
      {required this.letterList, required super.id, required super.title});
}

class PinYinIndexPage extends StatefulWidget {
  const PinYinIndexPage({super.key});

  @override
  State<PinYinIndexPage> createState() => _PinYinIndexPageState();
}

class _PinYinIndexPageState extends State<PinYinIndexPage> {
  List<_Group> groupList = [];

  void loadData() {
    Future.wait([listLetterGroup(), listLetter()]).then((res) {
      setState(() {
        List<LetterGroup> letterGroupList = res[0] as List<LetterGroup>;
        List<LetterInfo> letterList = res[1] as List<LetterInfo>;
        List<String> filter = [
          'danYunMu',
          'fuYunMu',
          'shengMu',
          'zhengTiRenDuYinJie'
        ];
        groupList = letterGroupList
            .where((group) => filter.contains(group.id))
            .map<_Group>((group) => _Group(
                id: group.id,
                title: group.title,
                letterList: letterList
                    .where((letter) => letter.group.contains(group.id))
                    .toList()))
            .toList();
      });
    });
  }

  void nav({String? groupId, String? id}) {
    Navigator.pushNamed(context, RouterKey.pinYinDetail.value,
        arguments: CommonDetailRouterArguments(
          group: groupId,
          id: id,
        ));
  }

  @override
  void initState() {
    super.initState();
    loadData();
  }

  @override
  Widget build(BuildContext context) {
    int i = 0;
    return SafeAreaPageWrapper(
      padding: EdgeInsets.all(12),
      child: groupList.isEmpty
          ? Center(
              child: Text('数据加载中'),
            )
          : ListView(
              padding: EdgeInsets.zero,
              children: groupList.map((letterGroup) {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding: EdgeInsets.symmetric(vertical: 12),
                      child: Text(
                        letterGroup.title,
                        style: TextStyle(fontSize: 18),
                      ),
                    ),
                    Wrap(
                      spacing: 12,
                      runSpacing: 12,
                      children: letterGroup.letterList.map((letter) {
                        return LetterIndexCard(
                          autofocus: i++ == 0,
                          letter: letter,
                          onConfirm: () {
                            nav(id: letter.value, groupId: letterGroup.id);
                          },
                        );
                      }).toList(),
                    )
                  ],
                );
              }).toList(),
            ),
    );
  }
}
